<template>
	<div>
		<x-header>table</x-header>
		<load-more tip="table" :show-loading="false" background-color="#fbf9fe"></load-more>
		<x-table :cell-bordered="false" style="background-color:#fff;">
	        <thead>
	          <tr>
	            <th>Product</th>
	            <th>Price</th>
	            <th>Quantity</th>
	            <th>操作</th>
	          </tr>
	        </thead>
	        <tbody>
	          <tr>
	            <td>Apple</td>
	            <td>$1.25</td>
	            <td> x 1</td>
	            <td> x 1</td>
	          </tr>
	          <tr>
	            <td>Banana</td>
	            <td>$1.20</td>
	            <td> x 2</td>
	            <td> x 1</td>
	          </tr>
	          <tr>
	            <td>Banana</td>
	            <td>$1.20</td>
	            <td> x 2</td>
	            <td> x 1</td>
	          </tr>
	          <tr>
	            <td>Banana</td>
	            <td>$1.20</td>
	            <td> x 2</td>
	            <td>
	            	<x-button>详情</x-button>
	            </td>
	          </tr>
	        </tbody>
      	</x-table>
	</div>
</template>

<script>
	import { XHeader, XTable, LoadMore, XButton } from 'vux'
	export default {
		components: {
			XHeader,
			XTable,
			LoadMore,
			XButton
		},
		data() {
			return {
				msg: 'Hello World!',
			}
		},
		methods: {

		}
	}
</script>

<style>
</style>